Adobe XD is a free tool provided by Adobe for UI/UX design and prototyping of various platforms including web, mobile, tablet and more. The first thing you’ll notice when building an app is the start screen. As a new Adobe XD user, I highly recommend clicking the Begin Tutorial button. Where you will be taken to a screen with a panel explaining the process of using Adobe XD
Information quickly guides you through the basics of the app. You will learn how to complete important tasks such as creating artboards, importing images, using repeat grids and how to link artboards together for prototyping. If you’re a Creative Cloud user, many of the elements will feel familiar.
Adobe XD Features
1. UX Kits
Adobe XD comes with UX Kits making it easy for you to quickly create native apps for Apple iOS, Windows, and Google platforms. To access this kit, simply select File > Open UI Kit.
This kit gives you access to the standard UI elements found on every platform. This will allow you to visualize how your app will look in its native environment. You can also use some of these standard UI elements to save time when prototyping your designs.
2. Repeat Grid
This really great feature found in Adobe XD is the Repeat Grid. Create one or more objects once, then select the objects and activate the repeat grid. Now you can iterate over objects that are on the x-axis and y-axis. You can even adjust the distance between objects and customize the appearance of objects as a group or individually.
3. Symbols
Symbols in Adobe XD work in a very similar way to other applications like Illustrator or Axure. If you have an object that you want to use on multiple artboards, which is unusual, you can make the object a symbol. Any changes to the object will be reflected elsewhere in the design. For example, if you need to change the color of an object, just make the change once, and you’re done. All examples will be updated throughout the design.
4. Creative Cloud Libraries
As a Creative Cloud user, you may already be sharing your assets such as colors, character styles, images, and other elements across all of your Adobe creative applications. In August 2017, Adobe added the ability for Adobe XD to access these assets. This can save time if you use a product like Adobe Photoshop or Illustrator to create assets for your Adobe XD project.
5. Prototype
Once you’ve finished designing all of your artboards, you might want to see how your app will work. Click the Prototype tab in the upper left corner and you can start creating links between artboards, which will represent screens in the app. This is a very simple, yet very valuable and powerful solution to see your app come to life.
6. Preview
When you link objects to other artboards, you can choose a transition, either easy entry or exit. Then, once you’ve linked everything, you can click the Play button on the top right to preview the app. Alternatively, you can download the XD app for iPhone/Android and preview your work on your actual device in real-time; either by USB or via Creative Cloud. Finally, you can easily share the prototype by creating a link directly from the app. Once you do, colleagues and other stakeholders will be able to add comments.
7. Export Assets
If you’re designing a native app, you’ll most likely need to export your assets for submission to developers. As long as you’re using vector objects, you can design in 1:1 and the tool will automatically provide you with the @2x and @3x versions that iOS and Android require, depending on your export options.